<template>
	<view class="go-back">
		<view git class="back-icon" @click="goBack"></view>
		<view class="title">{{info.title}}</view>
	</view>
	<view class="content-box" >
		<view class="empty-box">
			<view class="rule" @click="openPop(0)"></view>
		</view>
		<view class="top-bg-box"></view>
		<view class="reward-box">
			<view class="raffte-times">活动日期：{{info.start_time}}-{{info.end_time}}</view>
			<scroll-view scroll-x class="raffte-reward-items">
				<view class="raffte-reward-item" v-if="info.reward"  v-for="item in info.reward" key="item.id">
					<view class="raffte-reward-item-img" :style="'background-image:url('+ item.img +')'"></view>
				</view>
			</scroll-view>
			<view class="raffte-reward-text">活动奖励：{{info.reward_names}}</view>
		</view>
		<view class="raffle-box">
			<view class="top-text">
				<view class="left">点击牌面进行翻牌，还有<view class="count">{{info.raffle_count}}次</view>机会</view>
				<view class="right" @click="goRecord">
					<view class="right-text">奖励记录</view>
					<image class="right-icon" src="../../static/icons/right.svg" mode="" ></image>
				</view>
			</view>
			<view class="raffle-items">
				<view class="raffle-item" :class="index%3!=0? 'margin-right' : ''" v-for="index in 6"  :key="index" @click="doRaffle"></view>
			</view>
			<view class="share-btn shared" v-if="info.is_share"></view>
			<button class="share-btn"  open-type="share" v-else></button>
		</view>
		
		<view class="exchange-box" v-if="info.exchange">
			<view class="top-box">
				<view class="title"></view>
				<view class="sp-num">{{info.sp}}</view>
			</view>
			<view class="exchange-items">
				<view class="exchange-item" v-for="item in info.exchange" :key="item.id">
					<view class="left">
						<view class="exchange-img-box">
							<view class="exchange-img" :style="'background-image:url('+ item.img +')'"></view>
						</view>
						<view class="exchange-text-box">
							<view class="exchange-name">{{item.name}}</view>
							<view class="exchange-sp-num">{{item.sp}}碎片</view>
						</view>
					</view>
					<view class="exchange-btn"  v-if="info.sp >= item.sp"   @click="exchange(item.id, item.sp)"></view>
					<view class="exchange-btn no-exchange" v-else></view>
				</view>
			</view>
		</view>
		<view class="activity-box" v-if="info.activitys">
			<view class="top">
				<view class="title"></view>
			</view>
			<view class="list-box">
				<view class="activity-item" v-for="item in info.activitys" :key="item.id" @click="activityDetail(item.id)">
					<view class="name">{{item.title}}</view>
					<view class="user-info">
						<view class="avatar"><img :src="item.create_user_avatar || '/static/images/logo.png'" class="img"/></view>
						<view class="uname">{{item.create_user_name}}</view>
						<view class="cert"><image class="cert-icon" src="/static/icons/cert.png" mode="" v-if="item.create_user_cert_status == 2"/></view>
					</view>
					<view class="times"><image class="times-icon" src="/static/icons/times.png" mode=""></image>{{item.times}}</view>
					<view class="address"> <image class="add-icon" src="/static/icons/address.png" mode=""></image> {{item.address}}</view>
					<view class="imgs">
						<view class="img" :style="'background-image:url('+ imgsrc +')'" v-for="imgsrc in item.imgs" :key="index"  ></view>
					</view>
					<view class="enroll">
						<view class="enroll-num">{{item.enroll_num}}人报名</view>
						<view class="enroll-price">{{item.prices}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 生成猫的识别二维码 -->
		<view class="qr-code-wrapper">
		  <canvas canvas-id="qrcode" :style="{width: `${qrCodeInfo.size}px`, height: `${qrCodeInfo.size}px`}" />
		</view>
		
		<uni-popup ref="popup" type="center" >
			<view class="pop-box" >
				<view class="close-pop" @click="closePop"></view>
				<view class="pop-content">
					<view class="title" v-if="popType==0">活动规则</view>
					<mp-html :content="info.describe"   class="rule-box" v-if="popType==0" ></mp-html>
					<view class="title" v-if="popType==1||popType==2">{{info.title}}</view>
					<view class="raffle-reward-box" v-if="popType==1">
						<view class="reward-img-box">
							<view class="reward-img-box-img" :style="'background-image:url('+ rewardPop.img +')'"></view>
						</view>
						<view class="reward-title">
							{{rewardPop.title}}
						</view>
						<view class="reward-desc">
							{{rewardPop.desc}}
						</view>
						<view class="reward-btn reward-btn-hx"  v-if="rewardPop.goodType==0" @click="getCode(rewardPop.id)"></view>
						<view class="reward-btn reward-btn-sx" v-else @click="closePop"></view>
					</view>
					<view class="raffle-hx-box"  v-if="popType==2">
						<view class="hx-box">
							<image  class="hx-img" :src="qrCodeInfo.src"></image>
							<view class="hx-img-cover" v-if="is_verify"><view class="cover-text">已核销</view></view>
						</view>
						<view class="hx-title">{{rewardPop.title}}</view>
						<view class="hx-desc">{{rewardPop.desc}}</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
	
</template>

<script>
	import uQRCode from '../../common/uqrcode.js'
	export default {
		data() {
			return {
				shared: false,
				activityId:0,
				levelNo:'',
				info:{},
				is_verify:false,
				popType:1,//0-规则 1-奖品 2-核销码
				rewardPop:{
					goodType:0,
					img:'',
					title:'',
					desc:"",
					id:'',
				},
				qrCodeInfo: {
				  src: '', // 生成的二维码临时路径-验券二维码
				  size: 522,  //二维码尺寸
				  content: '', //二维码所需地址
				},
				qrCodeStateTimer: null,//状态定时器
				raffle_id:0,
			}
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
			  //console.log(res.target)
			  this.share();
			}
			
			return {
			  title: this.info.title,
			  path: '/pages/raffle/index?raffle_id='+ this.raffle_id
			}
		},
		onPullDownRefresh() {
			this.getInfo();
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		},
		onUnload() {
			if (this.qrCodeStateTimer) {
				clearInterval(this.qrCodeStateTimer)
			}
		},
		mounted() {
			let routes = getCurrentPages();
			let options = routes[routes.length - 1].options; 
			if (options.activityId) {
				 this.activityId = options.activityId;
			}
			if (options.levelNo) {
				 this.levelNo = options.levelNo;
			}
			if (options.raffle_id) {
				 this.raffle_id = options.raffle_id;
				 this.getInfo();
			}
		},
		methods: {
			//返回
			goBack() {
				if (this.qrCodeStateTimer) {
					clearInterval(this.qrCodeStateTimer)
				}
				uni.navigateBack({
					delta: 1,
				});
			},
			goRecord() {
				uni.navigateTo({
					url:"/pages/raffle/record?raffle_id="+this.raffle_id
				})
			},
			openPop(type) {
				this.popType = type
				this.$refs.popup.open();
			},
			closePop() {
				if (this.qrCodeStateTimer) {
					clearInterval(this.qrCodeStateTimer)
				}
				this.$refs.popup.close();
			},
			//获取抽奖信息
			async getInfo() {
				const res = await this.$request.get('/api/raffle/info',{raffle_id:this.raffle_id})
				if (res.code == 200) {
					this.info = res.data;
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
			},
			activityDetail(id) {
				uni.navigateTo({
					url: '/pages/detail/index?activityId='+id
				})
			},
			async share() {
				const res = await this.$request.post('/api/raffle/share',{raffle_id: this.raffle_id});
				if (res.code == 200) {
					this.info = res.data;
					uni.showToast({
						title: "分享成功",
						icon: 'none'
					})
					this.getInfo();
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
			},
			async doRaffle() {
				this.is_verify = false;
				const res = await this.$request.post('/api/raffle/do',{
					activity_id: this.activityId,
					level_no: this.levelNo,
					raffle_id: this.raffle_id,
				});
				if (res.code == 200) {
					this.rewardPop.goodType = res.data.award_type;
					this.rewardPop.img = res.data.award_img;
					this.rewardPop.title = res.data.award_name;
					this.rewardPop.id = res.data.id
					if (res.data.award_type == 0) {
						this.rewardPop.desc = '请到活动参与商户进行商品码核销 或稍后在奖励记录中查看';
					}else if(res.data.award_type == 1){
						this.rewardPop.desc = '集齐对应碎片可兑换实物奖励可在奖励记录中查看';
					}else{
						this.rewardPop.desc = res.data.sub_title;
					}
					this.getInfo();
					this.openPop(1);
				}else{
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					return
				}
			},
			getCode(record_no) {
				this.qrCodeInit(record_no);
				this.popType = 2;
				//启动定时器-查询是否核验成功
				this.qrCodeStateTimer = setInterval((record_no) => {
					this.checkVerifyStatus(record_no);
				}, 2000, record_no);
			},
			async exchange(id,sp) {
				const res = await this.$request.post('/api/raffle/exchange',{
					raffle_id: this.info.id,
					exchange_id:id
				});
				if (res.code == 200) {
					uni.showToast({
						title: "兑换成功，请在奖励记录中查看",
						icon: 'none',
					});
					this.info.sp = this.info.sp - sp;
					setTimeout(() => {
						this.getInfo();
					}, 1000)
					
				}else{
					uni.showToast({
						title: "兑换失败",
						icon: 'none'
					})
				}
			},
			// 生成二维码
			qrCodeInit(record_no) {
			 const content = `record_no=${record_no}`
			  uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: content,
					size: this.qrCodeInfo.size,
					typeNumber: 4,
					correctLevel : 1,
					margin: 6,
					success: async (res) => {
						this.qrCodeInfo.src = res
					},
			 })
			},
			// 查询验证状态
			async checkVerifyStatus(record_no) {
				const res = await this.$request.post('/api/raffle/verify_status',{ record_no: record_no},{ load: false })
				if (res.code == 200) {
					if (res.data.is_verify > 0) {
						this.is_verify = true;
						clearInterval(this.qrCodeStateTimer);
					}
				}
			},
		}
	}
</script>

<style>
page {
	background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_bg.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color:#FFDA61 ;
}
</style>
<style scoped lang="scss">
	.go-back{
		position: fixed;
		width:100%;
		height: 88rpx;
		overflow: hidden;
		z-index:999;
		top:88rpx;
		.back-icon{
			width: 64rpx;
			height: 64rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/back.png);
			background-size: 100% 100%;
			float: left;
			margin-left:18rpx;
			margin-top:16rpx;
		}
		.title{
			width: 500rpx;
			height: 42rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			line-height: 42rpx;
			color: #000000;
			text-align: center;
			font-style: normal;
			text-transform: none;
			float: left;
			margin-top:28rpx;
			overflow: hidden;
			//margin-left:130rpx;
		}
	}
	.content-box{
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		overflow: hidden;
		.empty-box{
			position: relative;
			width: 100%;
			height: 204rpx;
			.rule{
				position: absolute;
				width:120rpx;
				height:52rpx;
				top:204rpx;
				right: 0rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_rule.png);
				background-size: 100% 100%;
			}
		}
		.top-bg-box{
			width: 542rpx;
			height:336rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/IP.png);
			background-size: 100% 100%;
			margin:0 auto;
		}
		.reward-box{
			position: relative;
			width: 686rpx;
			height: 354rpx;
			background: #FDF7EC;
			border-radius: 32rpx;
			z-index: 3;
			margin: 0 auto;
			margin-top:-118rpx;
			overflow: hidden;
			.raffte-times{
				width: 100%;
				height: 32rpx;
				margin: 0 auto;
				margin-top:16rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #262626;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.raffte-reward-items{
				width: 638rpx;
				height: 172rpx;
				margin: 0 auto;
				margin-top:16rpx;
				white-space: nowrap; /* 防止小 box 换行 */
				.raffte-reward-item{
					display: inline-block;
					width: 172rpx;
					height: 172rpx;
					margin-right: 10rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/exchange_box_bg.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					.raffte-reward-item-img{
						width: 172rpx;
						height: 172rpx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
			}
			.raffte-reward-text{
				width: 638rpx;
				height: 70rpx;
				margin: 0 auto;
				margin-top:24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.raffle-box{
			width: 686rpx;
			height: 750rpx;
			background: #FDF7EC;
			border-radius: 32rpx;
			margin: 0 auto;
			margin-top:16rpx;
			overflow: hidden;
			.top-text{
			   width: 638rpx;
			   height: 30rpx;
			   margin:0 auto;
			   margin-top:34rpx;
			   font-family: PingFangSC, PingFang SC;
			   font-weight: 400;
			   font-size: 24rpx;
			   color: #262626;
			   text-align: left;
			   font-style: normal;
			   text-transform: none;
				.left{
					width: 505rpx;
					height: 30rpx;
					line-height: 30rpx;
					float: left;
					.count{
						display: inline-block;
						width: 66rpx;
						height: 36rpx;
						line-height: 36rpx;
						background: #FD2B46;
						color:#fff;
						border-radius: 40rpx;
						text-align: center;
						margin-left: 8rpx;
						margin-right: 8rpx;
					}
				}
				.right{
					width: 125rpx;
					height: 30rpx;
					line-height: 30rpx;
					float: left;
					margin-left: 8rpx;
					.right-text{
						width: auto;
						height: 30rpx;
						line-height: 30rpx;
						float: left;
					}
					.right-icon{
						float: right;
						width: 28rpx;
						height: 28rpx;
						line-height: 28rpx;
					}
				}
			}
			.raffle-items{
				width:578rpx;
				height:480rpx;
				margin:0 auto;
				margin-top:36rpx;
				overflow: hidden;
				.raffle-item{
					width:182rpx;
					height:216rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_card.png);
					background-size: 100% 100%;
					margin-bottom:24rpx;
					float: left;
				}
				.margin-right{
					margin-right: 16rpx;
				}
			}
			.share-btn{
				width:446rpx;
				height: 122rpx;
				margin:0 auto;
				margin-top:18rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_share_bg.png);
				background-size: 100% 100%;
				border: none !important;
			}
			.share-btn::after {
			  border: none !important;
			}
			.shared{
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_shared_bg.png);
				background-size: 100% 100%;
			}
		}
		.exchange-box{
			width: 686rpx;
			height: auto;
			background: #FDF7EC;
			border-radius: 32rpx;
			margin: 0 auto;
			margin-top:16rpx;
			padding-bottom:16rpx;
			overflow: hidden;
			.top-box{
				width: 638rpx;
				height: 64rpx;
				margin:0 auto;
				margin-top:26rpx;
				position: relative;
				.title{
					width: 334rpx;
					height: 64rpx;
					margin-right: 232rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_change_title.png);
					background-size: 100% 100%;
					background-repeat: no-repeat;
					float: left;
				}
				.sp-num{
					position: absolute;
					min-width: 80rpx;
					padding-left: 40rpx;
					width: auto;
					right: 0;
					height: 64rpx;
					line-height: 64rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_sp_num_bg.png);
					background-size: 40rpx 40rpx;
					background-position-y:12rpx ;
					background-repeat: no-repeat;
					text-align: right;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #262626;
					text-align: right;
					font-style: normal;
					text-transform: none;
				}
			}
			.exchange-items{
				width: 638rpx;
				height: auto;
				margin:0 auto;
				margin-top:16rpx;
				overflow: hidden;
				.exchange-item{
					width: 100%;
					height: 172rpx;
					.left {
						width: 494rpx;
						height: 172rpx;
						float: left;
						overflow: hidden;
						.exchange-img-box{
							width: 172rpx;
							height: 172rpx;
							float: left;
							background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/exchange_box_bg.png);
							background-size: 100% 100%;
							background-repeat: no-repeat;
							.exchange-img{
								width: 172rpx;
								height: 172rpx;
								background-size: 100% 100%;
								background-repeat: no-repeat;
							}
						}
						.exchange-text-box{
							width: 280rpx;
							height: 172rpx;
							float: left;
							margin-left: 24rpx;
							overflow: hidden;
							.exchange-name{
								width: auto;
								height: 40rpx;
								line-height: 40rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 500;
								font-size: 32rpx;
								color: #262626;
								text-align: left;
								font-style: normal;
								text-transform: none;
								margin-top:12rpx;
							}
							.exchange-sp-num{
								width: 104rpx;
								height: 40rpx;
								line-height: 40rpx;
								margin-top:80rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 32rpx;
								color: #262626;
								text-align: left;
								font-style: normal;
								text-transform: none;
							}
						}
						
					}
					.exchange-btn{
						width: 144rpx;
						height: 60rpx;
						float: left;
						border-radius: 40rpx;
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/exchange_yes.png);
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-top:56rpx;
					}
					.no-exchange{
						background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/exchange_no.png);
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
			}
		}
		.activity-box{
			width: 100%;
			height:auto;
			margin-top:16rpx;
			.top{
				width: 686rpx;
				height: 104rpx;
				background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_m_bg.png);
				background-size: 100% 100%;
				margin: 0 auto;
				overflow: hidden;
				.title{
					width: 290rpx;
					height: 64rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_m_title.png);
					background-size: 100% 100%;
					margin-left: 24rpx;
					margin-top:24rpx;
				}
			}
			.list-box{
				.activity-item{
					width: 718rpx;
					height: 564rpx;
					background: #FFFFFF;
					border-radius: 24rpx;
					margin: 0 auto;
					margin-bottom: 16rpx;
					overflow: hidden;
					.name{
						width: 596rpx;
						height: 38rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						font-size: 30rpx;
						color: #262626;
						text-align: left;
						font-style: normal;
						text-transform: none;
						margin-left: 16rpx;
						margin-top:40rpx;
						margin-bottom: 16rpx;
					}
					.user-info{
						display: block;
						width: 500rpx;
						height: 30rpx;
						margin-left: 16rpx;
						.avatar{
							width: 36rpx;
							height: 36rpx;
							border-radius: 0rpx 0rpx 0rpx 0rpx;
							border: 0rpx solid #F7F7F7;
							float:left;
							.img{
								width: 36rpx;
								height: 36rpx;
								border-radius: 18rpx;
							}
							margin-right: 10rpx;
						}
						.uname{
							width: auto;
							height: 30rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7B7B7B;
							text-align: left;
							font-style: normal;
							text-transform: none;
							float: left;
						}
						.cert{
							.cert-icon{
								width: 30rpx;
								height: 30rpx;
								margin-left: 16rpx;
								float: left;	
							}
						}
					
					}
					.times{
						display: block;
						clear: both;
						width: 100%;
						margin-top: 20rpx;
						height: 30rpx;
						line-height: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #7B7B7B;
						text-align: left;
						font-style: normal;
						text-transform: none;
						float: left;
						margin-bottom: 10rpx;
						.times-icon {
							width: 30rpx;
							height: 30rpx;
							margin-left: 16rpx;
							float: left;
							margin-right: 10rpx;
						}
					}
					.address{
						display: block;
						clear: both;
						width: 100%;
						height: 30rpx;
						line-height: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #7B7B7B;
						text-align: left;
						font-style: normal;
						text-transform: none;
						.add-icon {
							width: 30rpx;
							height: 30rpx;
							margin-left: 16rpx;
							float: left;
							margin-right: 10rpx;
						}
						
					}
					.imgs{
						clear: both;
						width: 100%;
						height: 220rpx;
						margin-top:24rpx;
						margin-left: 16rpx;
						.img{
							width: 220rpx;
							height: 220rpx;
							border-radius: 16rpx;
							float: left;
							margin-right:14rpx ;
							overflow:hidden;
							background-position: center center;
							background-repeat: no-repeat;
							-webkit-background-size:cover;
							-moz-background-size:cover;
							background-size:cover;
						}
					}
					.enroll{
					   width:702rpx;
					   margin-top: 32rpx;
					   margin-left: 16rpx;
					   .enroll-num{
						   width: 200rpx;
						   height: 30rpx;
						   font-family: PingFangSC, PingFang SC;
						   font-weight: 400;
						   font-size: 24rpx;
						   color: #7B7B7B;
						   text-align: left;
						   font-style: normal;
						   text-transform: none;
						   float: left;
					   }
					   .enroll-price{
						   position: relative;
						   width: auto;
						   height: 46rpx;
						   font-family: PingFangSC, PingFang SC;
						   font-weight: 500;
						   font-size: 32rpx;
						   color: #00CAC0;
						   text-align: right;
						   font-style: normal;
						   text-transform: none;
						   float: right;
						   margin-right:16rpx;
						   z-index:2;
						   
					   }
					   .enroll-price::before {
						    display: block;
					        content: "";
					        position: absolute;
					        bottom: 0;
					        left: 0;
					        width: 100%;
					        height: 14rpx;
					        background-color: #DDFFFD;
							z-index:-1;
					      }
						
					}
				}
			}
		}
	}
	
	.pop-box{
		width: 686rpx;
		height: 1198rpx;
		background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_pop_bg.png);
		background-size: 100% 100%;
		overflow: hidden;
		.close-pop{
			width: 32rpx;
			height: 32rpx;
			margin-top:140rpx;
			margin-left:40rpx;
			background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/pop-close.png);
			background-size: 100% 100%;
		}
		.pop-content{
			width: 638rpx;
			height: 976rpx;
			margin:0 auto;
			margin-top:24rpx;
			border-radius: 24rpx;
			overflow: hidden;
			.title{
				margin-top:18rpx;
				width: 100%;
				height: 42rpx;
				line-height: 42rpx;;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #000000;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
			.rule-box{
				display: block;
				width: 574rpx;
				height: 828rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin:0 auto;
				margin-top:48rpx;
				overflow-y: auto;
				
			}
			.raffle-reward-box{
				width: 574rpx;
				height: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin:0 auto;
				overflow: hidden;
				.reward-img-box{
					width: 446rpx;
					height: 530rpx;
					margin:0 auto;
					margin-top:32rpx;
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_img_bg.png);
					background-size: 100% 100%;
					.reward-img-box-img{
						width: 446rpx;
						height: 446rpx;
						background-size: 100% 100%;
						background-repeat: no-repeat;
					}
				}
				.reward-title{
					width: 428rpx;
					height: 50rpx;
					margin:0 auto;
					margin-top:24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #FF7800;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.reward-desc{
					width: 428rpx;
					height: 72rpx;
					margin:0 auto;
					margin-top:12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #262626;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.reward-btn{
					width: 370rpx;
					height: 122rpx;
					margin:0 auto;
					margin-top:38rpx;
				}
				.reward-btn-sx{
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_sx.png);
					background-size: 100% 100%;
				}
				.reward-btn-hx{
					background-image: url(https://xwj-miniprogram.oss-cn-hangzhou.aliyuncs.com/static/images/raffle_hx.png);
					background-size: 100% 100%;
				}
				
			}
			
			.raffle-hx-box{
				width: 574rpx;
				height: auto;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #262626;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin:0 auto;
				overflow: hidden;
				.hx-box{
					position: relative;
					display: block;
					width: 522rpx;
					height: 522rpx;
					margin:0 auto;
					.hx-img{
						display: block;
						width: 522rpx;
						height: 522rpx;
						margin:0 auto;
						margin-top:108rpx;
					}
					.hx-img-cover{
						position: absolute;
						display: block;
						width: 522rpx;
						height: 522rpx;
						top:0;
						left: 0;
						z-index:100;
						background: rgba(255,255,255,0.85);
						text-align: center; 
						.cover-text{
							font-weight: 500;
							font-size: 32rpx;
							color: #000000;
							line-height: 522rpx;
						}
					}
				}
				.hx-title{
					width: 522rpx;
					height: 50rpx;
					margin:0 auto;
					margin-top:72rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #FF7800;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
				.hx-desc{
					width: 428rpx;
					height: 72rpx;
					margin:0 auto;
					margin-top:12rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #262626;
					text-align: center;
					font-style: normal;
					text-transform: none;
				}
			}
		}
	}
	.qr-code-wrapper {
		position: fixed;
		overflow: hidden;
		left: -2000rpx;
		opacity: 0;
		top: 400rpx;
	}
</style>
